//颜色
blue = #247FEA
red = #eB1200
green = #02b000
border-color = #dcdfe6
//字号
word10 = 10px;
word12 = 12px;
word14 = 14px;
word16 = 16px;
word18 = 18px;
word24 = 24px;

//灰度级
gray3 = #333
gray4 = #444
gray6 = #666
gray9 = #999
grayE = #efefef
black = #000;
white = #fff;
bk = #f5f5f5;

//间隔
margin10 = 10px;
margin20 = 20px;
margin30 = 30px;

//输入框长度
input300 = 300px
input200 = 200px
input150 = 150px
input100 = 100px
input60 = 60px
input50 = 50px

word(size, color = gray3) {
  font-size: size;
  color: color;
}

//登录按钮
login-btn() {
  line-height 45px
  background-color blue
  text-align center
  border-radius 0
  color white
}

//实心按钮大
solid-btn() {
  padding 15px 30px
  line-height 45px
  background-color blue
  text-align center
  border-radius 0
  color white
}

//空心按钮大
hollow-btn() {
  padding 15px 30px
  line-height 45px
  background-color white
  border(blue)
  text-align center
  border-radius 0
  color blue
}

//操作按钮高亮小
small-active() {
  padding 5px 10px
  line-height 30px
  background-color white
  border(blue)
  text-align center
  border-radius 0
  color blue
}

//操作按钮灰色小
small-gray() {
  padding 5px 10px
  line-height 30px
  background-color white
  border(gray6)
  text-align center
  border-radius 0
  color gray6
}

//边框线(颜色|宽度|样式)
bor-bottom(color = border-color, width = 1px, style = solid) {
  border-bottom: width style color;
}

bor-top(color = border-color, width = 1px, style = solid) {
  border-top: width style color;
}

bor-left(color = border-color, width = 1px, style = solid) {
  border-left: width style color;
}

bor-right(color = border-color, width = 1px, style = solid) {
  border-right: width style color;
}

border(color = border-color, width = 1px, style = solid) {
  border: width style color;
}

//transition(类型|时长|呈现方式)
transition(part, time, vol = linear) {
  transition: part time vol;
  -webkit-transition: part time vol;
  -moz-transition: part time vol;
  -o-transition: part time vol;
}

border-radius(deg = 10px) {
  -webkit-border-radius: deg;
  -moz-border-radius: deg;
  -o-radius: deg;
  border-radius: deg;
}

//flex布局沿y轴
flex-y(justify = center, align = center) {
  display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */
  display: -webkit-flex; /* 新版本语法: Chrome 21+ */
  flex-flow: column nowrap;
  justify-content: justify;
  align-items: align
}

//flex布局沿x轴
flex-x(justify = space-between, align = center) {
  display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */
  display: -webkit-flex; /* 新版本语法: Chrome 21+ */
  flex-flow: row nowrap;
  justify-content: justify;
  align-items: align
}

flex-center() {
  display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */
  display: -webkit-flex; /* 新版本语法: Chrome 21+ */
  justify-content center
  align-items center
}

//文字省略号
ellipsis() {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

//多行省略号
multi(row) {
  display: -webkit-box
  -webkit-box-orient vertical
  -webkit-line-clamp: row
  overflow: hidden
  text-overflow: ellipsis
  word-break: normal
  width: auto
  white-space: pre-wrap
  word-wrap: break-word
}

//渐变色
gradient(direction, colorStart, colorEnd) {
  background: -webkit-linear-gradient(direction, colorStart, colorEnd);
  background: linear-gradient(direction, colorStart, colorEnd);
  background: -moz-linear-gradient(direction, colorStart, colorEnd);
  background: -o-linear-gradient(direction, colorStart, colorEnd);
  background: -ms-linear-gradient(direction, colorStart, colorEnd);
}

//图标
icon-c(widthIcon = 4vw, heightIcon = 4vw, fillColor = #000) {
  width: widthIcon
  height: heightIcon
  fill: fillColor
}

//模块样式
model(edg) {
  background-color #fff
  border-radius(edg)
  margin 10px
  padding 10px
}

main() {
  width: 99%
  min-width: 900px;
  margin 20px
  background #fff
  padding 10px
  box-sizing border-box
  min-height: calc(100vh - 100px);
  padding-bottom: 80px;
}

bottom() {
  flex-center();
  width: calc(100% - 200px);
  height: 50px
  background white
  position fixed
  bottom: 0
  box-shadow  0 2px 18px grayE
  z-index: 99
}

